import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import s from './SecurityRating.module.css';
import * as echarts from 'echarts';
const securityLevel = score => {
	const score_ = isNaN(score) ? score : 100 - score;
	if (score === 100) {
		return {
			level: '安全',
			color: '#e9fced ',
			colorT: '#11AB4E ',
		};
	} else if (score > 75) {
		return {
			level: '低危',
			color: '#fffae4 ',
			colorT: '#ffe579 ',
		};
	} else if (score > 50) {
		return {
			level: '中危',
			color: '#feebe3 ',
			colorT: '#ff8f55 ',
		};
	} else if (score > 25) {
		return {
			level: '高危',
			color: '#ff3b46 ',
			colorT: '#ffe3e2 ',
		};
	} else if (score > 0) {
		return {
			level: '严重',
			color: '#fde2e1 ',
			colorT: '#ee4a4b ',
		};
	} else {
		return {
			level: '未知',
			color: '#f4f4f4',
			colorT: '##a6a6a6 ',
		};
	}
};
export default function SecurityRating({ className, score }) {
	const { color, colorT, level } = securityLevel(score);
	React.useEffect(() => {
		var getvalue = score || 100;
		const option = {
			series: [
				// 刻度
				{
					name: '外部刻度',
					type: 'gauge',
					radius: '64%',
					min: 0, // 最小刻度
					max: 100, // 最大刻度
					splitNumber: 10, // 刻度数量
					startAngle: 200,
					endAngle: -20,
					axisLine: {
						show: false,
						lineStyle: {
							width: 1,
							color: [[1, 'rgba(0,0,0,0)']],
						},
					},
					// 刻度标签。
					axisTick: {
						show: true,
						splitNumber: 5,
						lineStyle: {
							color: '#C7CBCF', // 用颜色渐变函数不起作用
							width: 2,
						},
						length: 4,
					},
					axisLabel: { show: false },
					// 长刻度样式
					splitLine: {
						show: true,
						length: 8,
						lineStyle: {
							color: '#C7CBCF', // 用颜色渐变函数不起作用
						},
					}, // 分隔线样式
				},
				// 外圈及指针
				{
					type: 'gauge',
					startAngle: 200,
					endAngle: -20,
					splitLine: {
						show: false,
					},
					axisLabel: {
						show: false,
					},
					splitLabel: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: [
								// [0.25, '#FCD94A'],
								// [0.5, '#F18246'],
								// [0.75, '#ED3833'],
								// [1, '#D5342F'],
								[0.25, '#D5342F'],
								[0.5, '#ED3833'],
								[0.75, '#F18246'],
								[1, '#FCD94A'],
							],
							width: 10,
						},
					},
					pointer: {
						// 分隔线
						shadowColor: 'auto', // 默认透明
						shadowBlur: 5,
						length: '50%',
						width: 1,
					},
					itemStyle: {
						borderColor: '#D8D8D8',
						borderWidth: 3,
					},
					detail: {
						formatter: getvalue,
						color: 'rgba(57, 7, 7, 1)',
						fontSize: 20,
					},
					data: [
						{
							value: getvalue,
						},
					],
				},
				// 指针环
				{
					// 指针外环
					type: 'pie',
					hoverAnimation: false,
					legendHoverLink: false,
					radius: ['4%', '8%'],
					z: 10,
					label: {
						normal: {
							show: false,
						},
					},
					labelLine: {
						normal: {
							show: false,
						},
					},
					data: [
						{
							value: 100,
							itemStyle: {
								normal: {
									color: '#D8D8D8',
								},
							},
						},
					],
				},
				{
					type: 'pie',
					hoverAnimation: false,
					legendHoverLink: false,
					radius: ['0%', '5%'],
					z: 10,
					label: {
						normal: {
							show: false,
						},
					},
					labelLine: {
						normal: {
							show: false,
						},
					},
					data: [
						{
							value: 100,
							itemStyle: {
								normal: {
									color: '#FFFFFF',
								},
							},
						},
					],
				},
			],
		};
		const chart = echarts.init(document.getElementById('chart'));
		chart.setOption(option, true);
		chart.resize();
	}, [score]);
	return (
		<div className={cn(className, s.securityRating)}>
			<div className={s.descWapper}>
				<div>安全评分</div>
				<div id="chart" style={{ width: '16rem', height: '16rem' }}></div>
				<div className={s.circle}>
					<div className={s.text2} style={{ background: color }}>
						<span style={{ color: colorT }}>{level}</span>
					</div>
				</div>
			</div>
		</div>
	);
}

SecurityRating.propTypes = {
	className: PropTypes.string,
	score: PropTypes.any,
};

SecurityRating.defaultProps = {
	className: s.securityRating,
};
